import { useEffect, useMemo } from 'react';
import {useVisionStore, useForceUpdate} from '@/pages/index'
import OpNode from './opNode'
import VisionShow from './VisionShow'

export default () => {
  const {layout, opNodeList} = useVisionStore();
  const forceUpdate = useForceUpdate();
  layout.forceUpdate = forceUpdate;


  useEffect(() => {
    // ...
    const rootNode = new OpNode(layout.dom, {isLayout: true}, 0)
    opNodeList.push(rootNode)
    forceUpdate()
  }, []);
 

  return (
    <article
      style={{
        minHeight: '300px',
        display: 'flex',
        flexDirection: 'column',
      }}
      data-visdata={'true'}
      ref={(dom) => {
        layout.dom = dom;
      }}
    >
      <VisionShow
        parentOpNode={opNodeList[0]}
        planAction = {{
          tag: 'con',
          receive: ['Info'],
        }}
        style={{
          flex: 1,
          flexDirection: 'column',
        }}
      />

    </article>
  );
};
